<template>
    <div class="app-container">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">积分消耗记录</el-menu-item>
            <el-menu-item index="2">积分充值记录</el-menu-item>
        </el-menu>

        <el-table :data="consumeTableData" v-if="activeIndex == '1'">
            <el-table-column label="账户名" align="center" prop="agtPhone" />
            <el-table-column label="统计日期" align="center" prop="recordDate" />
            <el-table-column label="当日消耗次数" align="center" prop="consumeTotalCount" />
            <el-table-column label="当日消耗总积分" align="center" prop="consumeAmount" />
            <el-table-column label="当日结算后余额" align="center" prop="seriesName" />
            <el-table-column label="数据同步时间" align="center" prop="createTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.updateTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
                <template slot-scope="scope">
                    <el-button type="success" plain @click="handleView(scope.row)">查看消耗明细</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-table :data="rechargeTableData" v-if="activeIndex == '2'">
            <el-table-column label="账户名" align="center" prop="agtPhone" />
            <el-table-column label="操作时间" align="center" prop="createTime">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="来源" align="center" prop="source" />
            <el-table-column label="充值积分" align="center" prop="chargeMoney" />
            <el-table-column label="充值后剩余积分" align="center" prop="balance" />
            <el-table-column label="备注" align="center" prop="remark" />
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.currentPage"
            :limit.sync="queryParams.pageSize" @pagination="queryWalletSummary" />

        <el-drawer title="积分消耗明细" :visible.sync="drawerStatus" custom-class="drawer_class" direction="ltr" :before-close="handleClose">
            <el-table :data="drawerTableData">
                <el-table-column label="消耗事项" align="center" prop="transactionType" >
                    <template slot-scope="scope">
                        <span v-if="scope.row.transactionType == 1">充值</span>
                        <span v-if="scope.row.transactionType == 2">消费</span>
                    </template>
                </el-table-column>
                <el-table-column label="触发消耗用户" align="center" prop="agtPhone" />
                <el-table-column label="来源店铺" align="center" prop="shopName" />
                <el-table-column label="消耗积分" align="center" prop="amount" />
                <el-table-column label="消耗后剩余积分" align="center" prop="balance" />
                <el-table-column label="消耗时间" align="center" prop="createTime">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" align="center" prop="remark" />
            </el-table>
            <pagination v-show="drawerTotal > 0" :total="drawerTotal" :page.sync="drawerParams.currentPage"
                :limit.sync="drawerParams.pageSize" @pagination="getDrawerList" />
        </el-drawer>

    </div>
</template>

<script>
import { queryAgtWallet,queryWalletDetail,queryWalletSummary} from "@/api/agentWallet/agentWalletInfo";


export default {
    name: "agentWalletInfo",
    components: {},
    data() {
        return {
            drawerScope: {},
            drawerStatus: false,
            activeIndex: '1',
            consumeTableData: [{}],
            rechargeTableData: [],
            drawerTableData: [],
            drawerTotal: 0,
            // 查询参数
            drawerParams: {
                currentPage: 1,
                pageSize: 10,
                recordDate: ''
            },
            // 查询参数
            queryParams: {
                currentPage: 1,
                pageSize: 10,
                recordDate: ''
            },
            // 总条数
            total: 0,
            
        };
    },

    created() {
        this.queryWalletSummary();
    },
    methods: {
        /** 查询消耗积分 */
        queryWalletSummary() {
            queryWalletSummary(this.queryParams).then(res => {
                this.consumeTableData = res.value.list
                this.total = res.value.total
            })
        },
        handleClickDetails() {
            
        },
        

        handleView(row) {
            this.drawerScope = row
            this.drawerStatus = true

            const pmaras = {
                // currentPage, pageSize
                ...this.drawerParams,
                recordDate: row.recordDate, // 传递给抽屉查询

            }
            queryWalletDetail(pmaras).then(res => {
                this.drawerTableData = res.value.list
                this.drawerTotal = res.value.total
            })
        },
        // 菜单选择
        handleSelect(val) {
            this.activeIndex = val
        },
        // 获取抽屉内数据
        getDrawerList() {

        },
        handleClose() {
            this.drawerStatus = false
        }
    }
};
</script>

<style lang="scss" scope>
    .drawer_class {
    width: 60% !important;
    height: 100%;
    overflow-y: auto;
}
</style>